
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/base.css" rel="stylesheet"/>

    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="../../js/jquery-3.3.1.min.js" charset="utf-8"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <script src="../../layui-v2.2.5/layui/layui.js" charset="utf-8"></script>
    <script src="/js/cookie/jquery.cookie.js"></script>
    <script src="js/vue.js" type="text/javascript"></script>
    <title></title>
    <style>
        .zhuce_ouput>span{
            display: inline-block;
            text-align: right;
            color: rgb(33,33,33);
            margin-left: .2rem;
            width: 35%;
        }
        .zhuce_ouput>input{
            width: 5rem;
        }
    </style>
</head>
<body style="background-color: rgb(242,242,242);">
<div class="denglu" id="app">
    <div>
        <div class='ningmengshidai' style="padding-top: 5px;">邦邦</div>
        <div class='fubiaoti'>礼品卡回收</div>
        <img src="img/hy_b.png" class='picture'>
    </div>
    <!-- 登陆-->
    <div v-if="state==0">
        <div class="denglupage">
            <div class="dlpage_top">
                <div class="on">账号登陆</div>
                <div>验证码登陆</div>
            </div>
            <div class="dlpage_bottom">
                <div class="item">
                    <div class='right_phone'><img src='img/login.png'/><input id="userCodeLogin" placeholder='请输入账号' /> </div>
                    <div class='right_phone'><img src='img/pwd.png'/><input id="passwordLogin" type="password" placeholder='请输入密码' /></div>
                    <div id="onLogin" onclick="onLoginUserCode()" class='denglu_btn'>登陆</div>
                </div>
                <div class="item">
                    <div class='right_phone'><img src='img/login.png'/><input id="phoneLogin" placeholder='请输入手机号码'   /></div>
                    <div class='pwd_yzm'>
                        <div class='right_pwd'><img src='img/login1.png'/><input id="veriLogin" placeholder='请输入验证码'/> </div>
                        <span class='yzm' onclick="generateLoginCode()"  id="getLoginyzm">获取</span>
                        <%--<span class='yzm'  v-else>{{this.number}}</span>--%>
                    </div>
                    <div onclick="onLoginPhoneCode()" class='denglu_btn'>登陆</div>
                </div>
            </div>
        </div>
        <div class="xuanxiang" style="color: #000;">
            <div>忘记密码</div><div  @click="zhuce">注册账号</div>
        </div>
    </div>
    <!--注册 -->
    <div v-if="state==1" class="aaa">
        <div class='zhuce' >
            <div class='zhuce_title'>注册账号</div>
            <div class='zhuce_ouput' style="display: none">
                <span>用户名：</span><input  id="userCode" onblur="return checkUserCode()" placeholder='输入账号名/用户名' />
            </div>

            <div class='zhuce_ouput'>
                <span>手机号：</span><input id="phone"  placeholder='请输入手机号码' />
            </div>

            <div class='zhuce_ouput'>
                <span>密码：</span><input id="password" onblur="checkPassword()" type="password" placeholder='密码格式为6到16位的数字或字符' />
            </div>

            <div class='zhuce_ouput'>
                <span>验证码：</span><input id="veri" placeholder='请输入验证码' /><small onclick="generateCode()" id="getyzm">获取</small>
            </div>
            <div onclick="register()" id="register" class='btn_tongyi'>同意协议并创建客户</div>
        </div>
        <div class='xieyishu'><a href="huishou_xieyi.html"><div class='text' style="color: #000;">创建账号即表示你同意《邦邦销卡用户协议》</div></a><div style="color: #000;">已有账户?<span onclick="reloadPage()" @click='denglu'>立即登陆</span></div></div>

    </div>
</div>
</body>
<script>
    /**
     * 在注册页面点击立即登录后选项卡不能切换, 刷新页面
     */
    function reloadPage(){
        window.location.reload();
    }
    var daojishi=null;
    window.onload = function(){

        daojishi=new Vue({
            el:'#app',
            data:{
                state:0,
                yzmState:0,
                number:60
            },
            methods:{
                zhuce:function(){
                    this.state = 1
                },
                denglu:function(){
                    this.state = 0
                },
                generateLoginCode:function () {
                    console.log(111)
                    this.yzmState = 1
                    var num = 60
                    var that = this
                   var a =   setInterval(function () {
                            num-=1
                            that.number = num
                      console.log(that.number)
                        if(num<2){
                            clearInterval(a)
                            that.yzmState = 0
                        }
                    },1000)

                }
            },

        })
        Vue.nextTick(function(){
            $('.dlpage_bottom>div').eq(0).show()
            $('.dlpage_top>div').click(function() {
                var index = $(this).index()
                $(this).addClass('on')
                $(this).siblings().removeClass('on')
                $('.dlpage_bottom>div').eq(index).show()
                $('.dlpage_bottom>div').eq(index).siblings().hide()
            })
        })
    }



</script>
<script>

    $('.dlpage_bottom>div').eq(0).show()
    $('.dlpage_top>div').click(function() {
        var index = $(this).index()
        $(this).addClass('on')
        $(this).siblings().removeClass('on')
        $('.dlpage_bottom>div').eq(index).show()
        $('.dlpage_bottom>div').eq(index).siblings().hide()
    })
</script>

<script>

    function MSG(msg){
        layui.use('layer',function(){
            layer.msg(msg);
        });
}
    function checkLoginPhone(phone){
        var phoneRegex =/^[1]([3-9])[0-9]{9}$/;

        if(phoneRegex.test(phone)){
            return true;
        }else{
            MSG('手机格式不对');
            return false;
        }
    }

    /**
     * 校验手机格式
     */
    function checkPhone(phone){


        var phone =$("#phone").val();

        var phoneRegex =/^[1]([3-9])[0-9]{9}$/;

        if(phoneRegex.test(phone)){
                return true;
        }else{
           // MSG('手机格式不对');
            return true;
        }
    }

    /**
     * 检验密码是否符合格式
     * @returns {boolean}
     */
    function checkPassword(){
        var reg=/^[\d\w]{6,12}$/;//密码格式6位到16位数字字母
        var password=$("#password").val();
        if(reg.test(password)){
            return true;
        }else{
            MSG('密码格式不对');
            return false;
        }
    }

    /**
     * 检验账号
     * @returns {boolean}
     */
    function checkUserCode(){
        var v =document.getElementById('userCode');
        if(v==null||v==''){
            MSG('账户不能为空');
            return false;
        }else{

            return true;
        }
    }
    //账户注册
    function register(){
        var userCode=$('#userCode').val();
        var password=$('#password').val();
        var veri=$('#veri').val();
        var phone =$('#phone').val();
        var passwordReg=/^[\d\w]{6,12}$/;//密码格式6位到16位数字字母
        var phoneReg = /^[1]([3-9])[0-9]{9}$/;//电话
        if(!phoneReg.test(phone)){
            MSG("手机格式不对");
            return true;
        }
        if(!passwordReg.test(password)){
            MSG("密码格式不对");
            return false;
        }
        var data={
            'userCode':phone,
            'veri':veri,
            'password':password,
            'phone':phone
        };

            $.ajax({
            url:'/mobile/register',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data:data,
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success:function(reData){

                if (""!=reData){
                    MSG(reData.msg);
                    console.log(reData);
                    if (reData.code=='000000'){//注册成功当前页面进行刷新
                        window.location.reload();
                    }

                }else {
                  MSG("系统异常");
                }
            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        });

    };

    /*验证码登录，获取验证码*/
    function generateLoginCode(){
        var phone=$("#phoneLogin").val();
        if( $('#getLoginyzm').text() != '获取'){
            //alert('正在发送,请稍等')
            return false;
        }
        if (""==phone ||phone==null){
            alert("请输入手机号");
            return false;
        }
        var phoneReg = /^[1]([3-9])[0-9]{9}$/;//电话
        if(!phoneReg.test(phone)){
            alert("手机号码格式不正确");
            return false;
        }
        $.ajax({
            url:'/mobile/generateVeriCode',
            type:'POST', //GET
            async:true,    //或false,是否异步

            data:{type:'login',phone:phone},
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success:function(reData){

                console.log(reData);
                $("#veri").val(reData.data.key);

                //daojishi.generateLoginCode();
                //getyzm
                var num = 60
                var a = setInterval(function () {
                    num-=1
                    console.log(num)
                    $('#getLoginyzm').text(num)
                    if(num<2){
                        clearInterval(a)
                        $('#getLoginyzm').text('获取')
                    }
                },1000)

            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        });
    }

    //生成验证码
    function generateCode(){
        var phone=$("#phone").val();
        if( $('#getyzm').text() != '获取'){
            //alert('正在发送,请稍等')
            return false;
        }
        if (""==phone ||phone==null){

            alert("请输入手机号");
            return false;
        }
        var phoneReg = /^[1]([3-9])[0-9]{9}$/;//电话
        if(!phoneReg.test(phone)){
            alert("手机号码格式不正确");
        }
        $.ajax({
            url:'/mobile/generateVeriCode',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data:{type:'register',phone:phone},
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success:function(reData){

                console.log(reData);
                //getyzm
                var num = 60
                var a = setInterval(function () {
                    num-=1
                    console.log(num)
                    $('#getyzm').text(num)
                    if(num<2){
                        clearInterval(a)
                        $('#getyzm').text('获取')
                    }
                },1000)
            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        });
    }

    /**
     * 验证码登录
     */
    function onLoginPhoneCode(){
        var veri= $('#veriLogin').val();
        var phone=$('#phoneLogin').val();
        var type="phoneCodeLogin";

        var data = {'veri':veri,'phone':phone,'type':type};
        $.ajax({
            url:'/mobile/login',
            type:'POST', //GET
            async:true,    //或false,是否异步
            data:data,
            timeout:5000,    //超时时间
            dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend:function(xhr){
                /*console.log(xhr)
                 console.log('发送前')*/
            },
            success:function(reData){
                if(reData.result){

                    $.cookie("token",reData.data);//缓存token

                    window.location.href="/mobile/index";
                }else{
                    MSG(reData.msg);
                }
                console.log(reData);



            },
            error:function(xhr,textStatus){
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
            },
            complete:function(){
                //console.log('结束')
            }
        });

    }

   function onLoginUserCode(){

     var userCode= $('#userCodeLogin').val();
     var password=$('#passwordLogin').val();
     var type="userCodeLogin";
     var data = {'userCode':userCode,'password':password,'type':type};
       $.ajax({
           url:'/mobile/login',
           type:'POST', //GET
           async:true,    //或false,是否异步
           data:data,
           timeout:5000,    //超时时间
           dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
           beforeSend:function(xhr){
               /*console.log(xhr)
                console.log('发送前')*/
           },
           success:function(reData){
               if(reData.result){
                   $.removeCookie("token");
                   $.cookie("token",reData.data);//缓存token

                   window.location.href="/mobile/index";


               }else{
                   MSG(reData.msg);
               }
               console.log(reData);
               console.log(reData);

           },
           error:function(xhr,textStatus){
               console.log('错误')
               console.log(xhr)
               console.log(textStatus)
           },
           complete:function(){
               //console.log('结束')
           }
       });

   }
</script>
</html>